<template>
  <!--分娩提示-->
    <div>
        <el-table :data="tableData" border style="width: 100%" >
        <el-table-column prop="earNumber" label="种母耳号"   align="center">
            <template #default="{$index}">
                {{$index+1}}
            </template>
        </el-table-column>
        <el-table-column prop="earNumber" label="种母耳号"   align="center"/>
        <el-table-column prop="pregnancyDay" label="妊娠天数"   align="center">
          <template #default="scope">
                {{scope.row.pregnancyDay}}天
            </template>
        </el-table-column>
        <el-table-column prop="bedroomName" label="栋舍" align="center"/>
        <el-table-column prop="fieldName" label="栏位" align="center"/>
        <el-table-column prop="lastBreedingDate" label="配种日期" align="center">
            <template #default="scope">
                {{scope.row.lastBreedingDate.replace('T','').substring(0,10)}}
            </template>
        </el-table-column>
        <el-table-column prop="farrowingDate" label="预产日期" align="center">
            <template #default="scope">
                {{scope.row.farrowingDate.replace('T','').substring(0,10)}}
            </template>
        </el-table-column>
        <el-table-column prop="prompt" label="类型"   align="center"/>
    </el-table>
    <!-- 分页 -->
    <table>
      <tr>
        <td>
          <el-pagination
            v-model:current-page="page.pageIndex"
            v-model:page-size="page.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :background="true"
            layout="total,slot, prev, pager,next"
            :total="page.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            prev-text="上一页"
            next-text="下一页"
          >
            ,每页显示{{ page.pageSize }},当前第{{ page.pageIndex }}/{{ page.pageCount }}
            <el-button class="btn-prev" @click="handleCurrentChange(1)">首页</el-button>
          </el-pagination>
        </td>
        <td>
          <el-pagination
            v-model:current-page="page.pageIndex"
            v-model:page-size="page.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :background="true"
            layout="slot,sizes,jumper"
            :total="page.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <el-button class="btn-prev" @click="handleCurrentChange(page.pageCount)"
              >尾页</el-button
            >
          </el-pagination>
        </td>
      </tr>
    </table>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

onMounted(()=>{
    loadData();
})
const page = reactive({
    pageIndex:1,
    pageSize:3,
    totalCount:0,
    pageCount:0
})
//分娩提示列表
const tableData = ref([])
const loadData=async ()=>{
  const response = await axios.post(apiBedinUrl+'/api/DeliveryTips/GetDeliveryTips', {
      pageIndex: page.pageIndex,
      pageSize: page.pageSize
    });
    const data = response.data.data.list;
    // 计算妊检天数并添加到每个数据项中
    data.forEach(item => {
      const lastBreedingDate = new Date(item.lastBreedingDate.replace('T', ' ').substring(0, 19)); // 假设日期格式为YYYY-MM-DDTHH:mm:ss，并转换为Date对象
      const farrowingDate = new Date(item.farrowingDate.replace('T', ' ').substring(0, 19)); // 同上

      // 计算天数差（注意：这里假设两个日期都在同一天内的时间不影响天数计算）
      const pregnancyDay = Math.round((farrowingDate - lastBreedingDate) / (1000 * 60 * 60 * 24));

      // 将妊检天数添加到数据项中
      item.pregnancyDay = pregnancyDay;
      tableData.value = data;
      page.totalCount = response.data.data.totalCount;
      page.pageCount = response.data.data.pageCount;
    });
}
//分页
const handleSizeChange = (val: number) => {
  page.pageSize = val;
  loadData();
};
const handleCurrentChange = (val: number) => {
  page.pageIndex = val;
  loadData();
};
</script>
